<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Move Animations</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: red;
    }

    /* 第一个盒子的效果 */
    /* tran1-enter-active入场动画的时间段  tran1-leave-active离场动画的时间段 */
    .tran1-enter-active,
    .tran1-leave-active {
      transition: opacity 1s;
      /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
    }

    /* 显示前或隐藏后的效果 */
    /* tran1-enter 这是一个时间点，是进入之前元素的起始状态，此时还没有进入  */
    /* tran1-leave-to  是动画离开之后，离开的终止状态，此时元素动画已经结束 */
    .tran1-enter,
    .tran1-leave-to {
      opacity: 0;
      /* 都是隐藏效果 */
    }

             /* 第二个盒子的效果 */
        /* 显示过渡效果 */
        /* 隐藏过渡效果 */
        .tran2-leave-active {
            transition: all 1s ease;
        }
        /* 显示前或隐藏后的效果 */
        .tran2-enter, .tran2-leave-to {
            opacity: 0;
            transform: translateX(10px);/* 水平方向右移10px  tran2-enter 一开始让DOM元素处于靠右10px的位置 */ 
        }


  </style>
  <script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
  <!-- Delete ".min" for console warnings in development -->
  <script src="../../dist/vue.min.js"></script>
</head>

<body>

  <div id="el">
    <!-- transition 元素，是 Vue 官方提供的 -->
    <!-- 过渡效果 -->
    <button @click="show = !show">渐变过渡</button>
    <transition name="tran1" mode="">
      <div class="box" v-if="show"></div>
    </transition>
  </div>

  <div id="tran2">
    <button @click="show = !show">渐变平滑过渡</button>
    <transition name="tran2" mode="">
        <div class="box" v-if="show"></div>
    </transition>
</div>



  <script>
    var items = [1, 2, 3, 4, 5]
    var id = items.length + 1

    var vm = new Vue({
      el: '#el',
      data: {
        show: true
      },
      components: {
        item: {
          props: ['msg'],
          template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
        }
      },
      methods: {
        handleDelay(done, e) {
          console.log('213123')
          setTimeout(() => {
            console.log('done', done, e)
            done()
          }, 2000)
        }
      }
    })
    let vm2 = new Vue({
            el: '#tran2',
            data: {
                show: true,
            }
        })
  </script>
</body>

</html>
